<template>
	<view class="mainpadding">
		<!-- 反馈类型 -->
		<view class="xiahuaxian">
			<view class="sanshier xiaohei fonweight">{{$t('yjfk.fklx')}}</view>
			<view class="flexleft flex_wrap ">
				<view class="sanshis flexcenter margin_top" v-for="item in feedbackTypeIndexList" :key="item.id"
					@click="feedback_type_id=item.dictLabel">
					<view :class="feedback_type_id==item.dictLabel?'yxzbtn':'wxzbtn'" class="flexcenter">{{item.dictLabel}}</view>
				</view>
			</view>
		</view>
		<view class="sanshier xiaohei fonweight margin_top">{{$t('yjfk.fknr')}}</view>
		<textarea class="margin_top textarea" :placeholder="$t('yjfk.wtms')" maxlength="-1"
			v-model="reportDesc"></textarea>
		<view class="flexleft flex_wrap">
			<view class="flexcenter tpbox " v-for="(item,index) in images" :key="index">
				<view class="tjtp">
					<image class="" :src="item" mode=""></image>
					<view class="deleteimg" @click="deleteimg(index,images)"></view>
				</view>
			</view>
			<view class="flexcenter tpbox " v-if="images.length<6" @click="uploadImg(6,images)">
				<image class="tjtp" src="@/static/image/system/tjtp.png" mode=""></image>
			</view>
		</view>
		<view class="strongtext xiahuaxian xiaohui margin_top">{{$t('yjfk.scjt')}}</view>
		<view class="xiahuaxian margin_top">
			<view class="sanshier xiaohei ">{{$t('yjfk.lxlxfs')}}</view>
			<input class="margin_top ershiba" type="text" :placeholder="$t('yjfk.qsrlxfs')" v-model="reportContact">
		</view>
		<view class="gudingdb ffffff mainpadding" @click="submit">
			<view class="bigbtn">{{$t('yjfk.tj')}}</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				feedbackTypeIndexList: [],
				feedback_type_id: "",
				images: [],
				reportDesc: "",
				reportContact: "",
				permissionID: '',
				sourceType: ['camera'],
				upnum: 0
			}
		},
		onLoad() {
			this.feedbackTypeIndex()
		},
		methods: {
			submit() {
				if (this.feedback_type_id == "") {
					httpRequest.toast(this.$t('yjfk.xzfklx'))
					return false
				}
				if (this.reportDesc == "") {
					httpRequest.toast(this.$t('yjfk.srfknr'))
					return false
				}
				if (this.reportContact == "") {
					httpRequest.toast(this.$t('yjfk.qsrlxfs'))
					return false
				}
				let that = this
				uni.showLoading({
					mask: true,
					title:"Loading"
				})
				httpRequest.request('/api/v1/note/report', 'POST', {
					reportDesc: this.reportDesc,
					reportImage: this.images.join(),
					reportContact: this.reportContact,
					reportLabel: this.feedback_type_id,
					reportType:2
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			deleteimg(index, upImgs, upImgs_text) {
				upImgs.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImg(value, upImgs, upImgs_text) {
				let _this = this;
				let num = 1
				if (value > 2) {
					num = Number(value) - upImgs.length;
					this.upnum = num
					if (num <= 0) {
						return false;
					}
				}
				uni.showActionSheet({
					itemList: [_this.$t('system.xj'), _this.$t('system.xc')],
					success: function(res) {
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(this.upnum, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						} else {
							httpRequest.chooseImage(this.upnum, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i])
								}
							}).catch(err => {});
						}
			
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/v1/index/upload', url).then(res => {
					let image_item = res.fullurl;
					this.images.push(res.url)
				}).catch(err => {});
			},
			feedbackTypeIndex() {
				httpRequest.request('/api/v1/index/type', 'GET', {
					dictType:"app_feedback_label"
				}).then(res => {
					this.feedbackTypeIndexList = res.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tpbox {
		width: 33.33%;
		margin-top: 30rpx;
	}

	.tjtp {
		width: 209rpx;
		height: 209rpx;
		position: relative;

		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}

	.textarea {
		width: 100%;
		box-sizing: border-box;
		height: 200rpx;
	}

	.wxzbtn {
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 28rpx;
		width: 218rpx;
		height: 64rpx;
		border: 1rpx solid #BFBFBF;
		font-weight: 400;
		color: #999999;
	}

	.yxzbtn {
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 28rpx;
		width: 218rpx;
		height: 64rpx;
		background: #ebf5ff;
		border: 1rpx solid #3B99FF;
		font-weight: 400;
		color: #3B99FF;
	}
</style>